<template>
  <el-row  v-resize:100="resize" :gutter="0">
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="item">
        <online-list :height="Height"></online-list>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="item">item</div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import onlineList from './components/onlineList.vue'
import {IChatMessage} from "@/api/types/chat";
import {ref} from "vue";

const url = import.meta.env.VITE_API_BASEURL

const list = ref<Array<IChatMessage>>([])

const se = new EventSource(`${url}/chatRoomMsg`)
se.onmessage = function (e) {
  const data = JSON.parse(e.data) as IChatMessage
  list.value.push(data)
}

const Height=ref(500)
const resize = (el: HTMLElement) => {
  console.log(el.clientHeight)
  Height.value=el.clientHeight-155
}
</script>
<style lang="scss" scoped>
div.item{
  width: 100%;
  background: #eeeeee;
  height: 100vh;
  min-height: 300px;
  box-sizing: border-box;
  border-left: 5px #ffffff solid;
  border-right: 5px #ffffff solid;
  border-top: 5px #ffffff solid;
  border-bottom: 5px #ffffff solid;

}
</style>